<template>
  <div class="rfks-task-container">
    <fks-query-page
      v-loading="loading"
      :page-sizes="[15, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :current-page.sync="page"
      :page-size.sync="size"
      :data="tableData"
      highlight-current-row
      :total="total"
      :table-name="LANG.PROCESS_MONITOR"
      @query="getData"
      @clear="clear"
      @sort-change="sortHandler"
    >
      <template slot="search">
        <!-- <fks-search-item :label="LANG.TASK_SUBJECT">
          <fks-input v-model="taskSubject" @keyup.enter.native="getData" />
        </fks-search-item> -->
        <fks-search-item :label="LANG.FORM_NAME">
          <fks-input v-model="formName" @keyup.enter.native="getData" />
        </fks-search-item>
        <fks-search-item :label="LANG.CREATOR">
          <fks-input v-model="creator" @keyup.enter.native="getData" />
        </fks-search-item>
        <!-- <fks-search-item label="表单分类">
          <fks-input v-model="modelKey" @keyup.enter.native="getData"></fks-input>
        </fks-search-item>-->
        <fks-search-item :label="LANG.FORM_STATE">
          <fks-select v-model="taskState" placeholder @change="getData">
            <fks-option :key="0" :label="LANG.FORM_UNFINISHED" value="0">
              {{ LANG.FORM_UNFINISHED }}
            </fks-option>
            <fks-option :key="1" :label="LANG.FORM_FINISHED" value="1">
              {{ LANG.FORM_FINISHED }}
            </fks-option>
            <fks-option :key="2" :label="LANG.ABANDON" value="2">
              {{ LANG.ABANDON }}
            </fks-option>
            <!-- <fks-option :key="3" :label="LANG.SAVEDRAFT" value="3">{{
              LANG.SAVEDRAFT
            }}</fks-option> -->
          </fks-select>
        </fks-search-item>
        <fks-search-item :span="24" :label="LANG.PROCESS_CREATE_TIME">
          <fks-time-span-pick
            :start-time.sync="startDate"
            value-format="yyyy-MM-dd"
            :end-time.sync="endDate"
          />
        </fks-search-item>
      </template>
      <template>
        <fks-table-column type="index" align="center" label="#" width="60" />
        <fks-table-column
          is-link
          prop="formName"
          :label="LANG.FORM_NAME"
          header-align="center"
          align="left"
          min-width="180"
        >
          <template slot-scope="scope">
            <span @click="view(scope.row)">{{ scope.row.formName }}</span>
          </template>
        </fks-table-column>
        <fks-table-column
          prop="taskSubject"
          :label="LANG.TASK_SUBJECT"
          header-align="center"
          align="left"
          min-width="120"
        />

        <fks-table-column
          min-width="80"
          prop="taskState"
          :label="LANG.FORM_STATE"
          align="center"
        >
          <template slot-scope="scope">
            <fks-tag v-if="scope.row.taskState == 0">
              {{ LANG.FORM_UNFINISHED }}
            </fks-tag>
            <fks-tag v-if="scope.row.taskState == 1" type="success">
              {{ LANG.FORM_FINISHED }}
            </fks-tag>
            <fks-tag v-if="scope.row.taskState == 2" type="danger">
              {{ LANG.ABANDON }}
            </fks-tag>
            <fks-tag v-if="scope.row.taskState == 3" type="warning">
              {{ LANG.SAVEDRAFT }}
            </fks-tag>
          </template>
        </fks-table-column>
        <fks-table-column
          prop="taskCreatorName"
          min-width="80"
          :label="LANG.CREATOR"
          align="center"
        />
        <fks-table-column
          prop="createDate"
          :label="LANG.PROCESS_CREATE_TIME"
          min-width="160"
          align="center"
          sortable
        >
          <template slot-scope="scope">
            {{
              scope.row.createDate
                ? $dayjs(scope.row.createDate).format('YYYY-MM-DD HH:mm')
                : ''
            }}
          </template>
        </fks-table-column>
        <fks-table-column
          prop="taskAsigneeName"
          :label="LANG.ASSIGNEE"
          min-width="80"
          align="center"
        />
        <fks-table-column
          prop="finishDate"
          :label="LANG.FINISH_TIME"
          min-width="160"
          align="center"
          sortable
        >
          <template slot-scope="scope">
            {{
              scope.row.finishDate
                ? $dayjs(scope.row.finishDate).format('YYYY-MM-DD HH:mm')
                : ''
            }}
          </template>
        </fks-table-column>
        <fks-table-column :label="LANG.OPERATION" align="center">
          <template slot-scope="scope">
            <fks-button
              class="table-column-opt-button"
              type="text"
              @click="viewProcess(scope.row)"
            >
              {{ LANG.PROCESS_PERFORMANCE }}
            </fks-button>
            <fks-button
              class="table-column-opt-button"
              :disabled="
                scope.row.taskState == 1 ||
                scope.row.taskState == 2 ||
                scope.row.taskKey == 'fawkes_custom_flow_start'
              "
              type="text"
              @click="reject(scope.row)"
            >
              {{ LANG.REJECT }}
            </fks-button>
            <!-- <fks-button
              class="table-column-opt-button"
              @click="abandon(scope.row)"
              type="text"
              >{{ LANG.ABANDON }}</fks-button
            > -->

            <fks-popconfirm
              :confirm-button-text="LANG.CONFIRM"
              :cancel-button-text="LANG.CANCEL"
              :title="LANG.ABANDON_TASK"
              cancel-button-type="plain"
              @onConfirm="abandon(scope.row.taskId)"
            >
              <fks-button
                slot="reference"
                danger-text
                :disabled="scope.row.taskState == 1 || scope.row.taskState == 2"
              >
                {{ LANG.ABANDON }}
              </fks-button>
            </fks-popconfirm>
          </template>
        </fks-table-column>
      </template>
    </fks-query-page>
    <router-view />
    <flow-manage-detail
      :task-key="taskKey"
      :visible.sync="visible"
      :task-id="taskId"
    />
    <process-performance
      :visible.sync="performanceVisible"
      :task-id="taskId"
      :biz-id="bizId"
      :process-instance-id="processInstanceId"
    />
  </div>
</template>

<script>
import { getReltasksAll, processAbandon } from './api'
import FlowManageDetail from './components/FlowManageDetail'
import ProcessPerformance from './components/ProcessPerformance'
// import Mix from '@/utils/mixin'
export default {
  name: 'FlowAgents',
  // mixins: [Mix],
  components: { FlowManageDetail, ProcessPerformance },
  data() {
    return {
      visible: false,
      performanceVisible: false,
      loading: false,
      taskId: '',
      bizId: '',
      processInstanceId: '',
      asignee: '',
      taskName: '',
      formName: '',
      creator: '',
      taskState: '',
      taskSubject: '',
      startDate: '',
      endDate: '',
      searchBarH: '58',
      page: 1,
      size: 15,
      total: 0,
      sortOrder: '',
      sortColumn: '',
      tableData: [],
      rejectedTaskKey: '',
      taskNodeList: '',
      taskKey: ''
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    /**
     * @description: 关闭弹窗
     */
    close() {
      this.visible = false
    },
    getData() {
      this.loading = true
      getReltasksAll({
        asignee: this.asignee,
        creator: this.creator,
        formName: this.formName,
        startDate: this.startDate ? this.startDate + ' 00:00:00' : '',
        endDate: this.endDate ? this.endDate + ' 23:59:59' : '',
        taskState: this.taskState,
        taskSubject: this.taskSubject,
        page: this.page,
        order: this.sortOrder,
        column: this.sortColumn,
        size: this.size
      }).then((res) => {
        if (res.status) {
          if (res.data) {
            this.tableData = res.data.list
            this.total = res.data.total
          }
        } else {
          this.$message({
            message: res.message,
            type: 'warning',
            duration: 3000
          })
        }
        this.loading = false
      })
    },
    /**
     * @description: 编辑
     * @param {row} 被编辑行数据
     */
    clear() {
      this.taskSubject = ''
      this.formName = ''
      this.creator = ''
      this.taskState = ''
      this.startDate = ''
      this.endDate = ''
    },
    /**
     * @description: 查看事件
     * @param {row} 选中行数据
     */
    view(data) {
      //data.ext1 == '1'表示为自由流程
      if (data.formBizId && data.formKey && data.ext1 === '1') {
        this.$router.push({
          path:
            this.$route.path +
            '/customForm/view/' +
            data.formKey +
            '/' +
            data.formBizId,
          query: {
            taskName: data.taskName,
            processInstanceId: data.processInstanceId
          }
        })
      } else if (data.formBizId && data.formKey && data.ext1 == '2') {
        this.$router.push({
          path:
            this.$route.path +
            '/wpForm/view/' +
            data.formKey +
            '/' +
            data.formBizId,
          query: {
            taskName: data.taskName,
            processInstanceId: data.processInstanceId
          }
        })
      }
      //data.ext1 !== '1'表示为普通流程
      else if (
        data.formBizId &&
        data.formKey &&
        (data.ext1 !== '1' || data.ext1 !== '2')
      ) {
        this.$router.push(
          this.$route.path +
            `/form/view/${data.formKey}/${data.formBizId}?processInstanceId=${data.processInstanceId}`
        )
      } else {
        this.$message.warning(this.LANG.MISSING_PARAMETER)
      }
    },
    viewProcess(row) {
      this.taskId = row.taskId
      this.bizId = row.formBizId
      this.processInstanceId = row.processInstanceId
      this.performanceVisible = true
    },
    reject(row) {
      this.taskId = row.taskId
      this.taskKey = row.taskKey
      this.visible = true
    },
    abandon(taskId) {
      // this.$confirm('是否废弃"' + row.taskSubject + "？", {
      //   title: "提示",
      //   type: "warning",
      // }).then(() => {
      //   const data = {
      //     taskId: row.taskId,
      //   }
      processAbandon(taskId).then((res) => {
        if (res.status) {
          this.getData()
        }
      })
    },
    /**
     * @description: 排序
     */
    sortHandler(data) {
      this.sortOrder = data.order
        ? data.order == 'ascending'
          ? 'asc'
          : 'desc'
        : null
      this.sortColumn = data.prop
      this.getData()
    }
  }
}
</script>

<style lang="scss">
.rfks-task-container {
  position: relative;
  height: 100%;
  overflow: auto;

  .search-bar {
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: #eee;
    }
  }
}

.datamodfks-btns {
  display: flex;
  justify-content: flex-end;
}

.fks-table__row {
  button + span {
    margin-left: 10px;
  }
}
</style>
